<template>
	<view class="nav-bar">
		<view class="nav-content">
			<view :style="{ height: `${statusBarHeight * 2}rpx` }"></view>
			<view class="nav-title">
				<icon class="icon-BACK" @click="back"></icon>
				<text class="title-name" v-if="titleName">{{ titleName }}</text>
			</view>
		</view>
		<!-- <view :style="{ height: `${statusBarHeight * 2 + 80}rpx` }"></view> -->
	</view>
</template>

<script>
const app = getApp();
export default {
	props: {
		titleName: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			statusBarHeight: app.globalData.system_info.statusBarHeight
		};
	},
	methods:{
		back(){
			uni.navigateBack()
		}
	}
};
</script>

<style scoped lang="scss">
.nav-bar {
	// margin-bottom: 24rpx;
	.nav-content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		// background: #FFFFFF;
		z-index: 999;
		.nav-title {
			padding: 0 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #ffffff;
			position: relative;
			.icon-BACK {
				width: 20rpx;
				height: 32rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-jifeng-back.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 40rpx;
			}
		}
	}
}
</style>
